<template>
  <div>

    <a-card class="mt-2">
      <a-table
        bordered
        :scroll="{ x: 'max-content' }"
        :columns="columns"
        :data-source="data"
        :loading="tableLoading"
      >
        <template #bodyCell="{ column, record }">
          <template  v-if="column.dataIndex === 'actions'">
            <a-button size="small" type="link" @click="handleDetail(record)">生成代码</a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:open="showModal" title="基础通用代码" :footer="null" style="width: 80vw;">
      <a-tabs v-model:activeKey="activeKey" class="codeStyle">
        <a-tab-pane key="1" tab="Entity">
          <code-view  :code="form.entityCode" :type="'java'"> </code-view>
        </a-tab-pane>
        <a-tab-pane key="2" tab="Mapper">
          <code-view  :code="form.mapperCode" :type="'java'"> </code-view>
        </a-tab-pane>
        <a-tab-pane key="3" tab="Service">
          <code-view  :code="form.serviceCode" :type="'java'"> </code-view>
        </a-tab-pane>
        <a-tab-pane key="4" tab="Controller">
          <code-view  :code="form.controllerCode" :type="'java'"> </code-view>
        </a-tab-pane>
        <a-tab-pane key="5" tab="Types">
          <code-view  :code="form.typesCode" :type="'ts'"> </code-view>
        </a-tab-pane>
        <a-tab-pane key="6" tab="Api">
          <code-view  :code="form.apiCode" :type="'ts'"> </code-view>
        </a-tab-pane>
        <a-tab-pane key="7" tab="Page">
          <code-view  :code="form.pageCode" :type="'ts'"> </code-view>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
  import { h, onMounted, reactive, ref } from 'vue';
  import CodeApi from '@/api/CodeApi';
  import { usePermission } from '@/hooks/usePermission';
  import CodeView from "@/components/CodeView.vue";
  const { hasPermission } = usePermission();
  const activeKey = ref('2');

  let columns = [
    { title: '表名', dataIndex: 'tableName', width: 150 },
    { title: '表注释', width: 120, dataIndex: 'tableComment' },
    { title: '引擎', dataIndex: 'engine', width: 150 },
    { title: '表行数', dataIndex: 'tableRows', width: 150 },
    { title: '表字符集', dataIndex: 'tableCollation', width: 150 },
    { title: '创建时间', dataIndex: 'createTime', width: 150 },
    { title: '更新时间', dataIndex: 'updateTime', width: 150 },
    {
      title: '操作',
      dataIndex: 'actions',
      align: 'center',
      width: 100,
    },
  ];
  let data = ref([]);

  onMounted(() => {
    getList();
  });


  const tableLoading = ref(false);

  function getList() {
    tableLoading.value = true;
    CodeApi.getAll()
      .then((res) => {
        data.value = res.data;
      })
      .finally(() => (tableLoading.value = false));
  }



  const showModal = ref(false);
  let form = reactive<TableCode>({});
  function handleDetail(row) {
    tableLoading.value = true;
    CodeApi.gen(row.tableName).then((res)=>{
      showModal.value = true;
      Object.assign(form, res.data[0]);
    }).finally(()=>{
      tableLoading.value = false;
    })
  }
</script>

<style scoped>

.codeStyle{
  max-height: 70vh;
  overflow: scroll;
}

</style>
